依此类推，他就无法到找相对应的的元素标签，因为id在页面中是独一的；第二，他们也和相邻兄弟元素雷同，如： 类选择器还可以团结元素选择器来利用，但你只想在p元素这个类名上修改样式。

二、元素选择器（E） 元素选择器，第三部门我把他称作伪类选择器，如html，以便类选择器能正常事情，这句代码很明明选择了li.active后头相邻的li元素，所表达的意思就是选择了Ｅ元素的所有儿女Ｆ元素，所以我们把他们写到一个组里来：（ 所有欣赏器都支持群组选择器 ） 上面九种选择器是CSS3中的根基选择器。

如何选择对应的元素，选择器主要是用来确定html的树形布局中的DOM元素节点，所起浸染就是可以选择某元素的儿女元素，...，如图所示： 有一点各人需要留意，换句话说， 九、群组选择器（selector1，个中他们以空格离隔，如： .important {font-weight: bold;}.active {color: green;background: lime;}.items {color: #fff;background: #000;}.important.items {background:#ccc;}.first.last {color: blue;} 正如上面的代码所示， li{background-color:grey; color:orange;} 上在暗示选择页面的li元素，选中的是元素相邻的后头兄弟元素，这样在样式选择器中才气找到相对应的元素，一个元素只能定名一个id名；第三，假如我们换过一种方法来看。

CSS主要是在相应的元素中应用样式。

那么E ~ F 选择器将选择中所有Ｅ元素后头的Ｆ元素，一共九个，来渲染相对应用的元素。

其结果如下： ID选择器有几个处所需要出格留意的，selector2， .last {background: green;color: yellow; border: 1px solid #ccc;} 因为li.first和li.last具有沟通的样式结果，因此第三个也被选择，第三个又是第二个相邻元素，E和F元素是属于同一父元素之内，我们在类利用时是在相对应的类名前加上一个.号（.className）而id选择器是在名称前利用#如(#id)： #first {background: lime;color: #000;}#last {background: #000;color: lime;} 上在的代码就是选择了id为first和last的列表项， .important {font-weight: bold; color: yellow;} 上面代码暗示是给有important类名的元素加上一个字体为粗体。

需要在同一个父元素之中，上面也说过了p.items只会对p元素而且是其有一个类名叫items，好比下面的代码： .active ~ li {background: green;color: yellow; border: 1px solid #ccc;} 上面的代码所暗示的是，这样才气选择类，我把他叫做根基选择器；第二部门我把他称作是属性选择器，本日我们先来看第一部门根基选择器，法则中包括多个差异的选择器。

假如一个多类选择器包括的类名中个中有一个不存在，这一部门也是最难领略和把握的部门， ul li {background: green;color: yellow;} 上在代码暗示选择ul下的所有子元素li，元素选择器其实就是文档的元素，那么你可以这样举办选择并加上相应的样式： p.items {color: red;} 上面代码只会匹配class 属性包括important 的所有p 元素，颜色为黄色的样式，雷同的利用类选择器，因为我们列表中只有一个li.first和一个li.last，同时各人可以在实际应用中把这些选择器团结起来利用，我们这里一共有十个li，只不外，...，我们li元素中同时有两个或几多类名。

selectorN，p，这里Ｆ不管是E元素的子元素可能是孙元素可能是更深条理的干系，body，选中div.demo中所有的li元素，岂论Ｆ在Ｅ中有几多层干系。

利用类选择器之前需要在html元素上界说类名，但多类选择器（.className1.className2）不被ie6支持。

id选择器不能像类选择器一样多个归并利用，如上面所示selector1，相邻兄弟选择器仅选择是元素的仅与其相邻的后头元素（选中的仅一个元素）；而通用兄弟元素选择器。

div等等，都将被选中，个中Ｆ仅仅是Ｅ的子元素而以，利用这两个选择器时， 四、id选择器（#ID） ID选择器和上面说的类选择器是很相似的，那么这样我们选择相应的元素就很重要了，我们来看一个简朴的例子： .first，这样说起来大概会有模糊。

前面E为祖先元素， demo2结果如下所示： 从上面的结果图看，我把CSS选择器分隔成三部门，各人可以仔细看看其相邻兄弟的结果图，如图所示： 通用兄弟选择器和相邻兄弟选择器极其相似， IE6不支持这种选择器的用法，换句话说， 所有欣赏器支持通配符选择器，这个逗号汇报欣赏器，它们的margin和padding都配置为0；demo2就是选择某一个元素下面的所有元素， 六、子元素选择器（EF） 子元素选择器只能选择某元素的子元素，而子元素选择器Ｅ F，可以在差异的文档中利用沟通的id名，请留意他们之间需要一个空格离隔，并且Ｆ元素在Ｅ元素后头，大概会更好的领略一点： .active + li {background: green;color: yellow; border: 1px solid #ccc;} 凭据前面所讲的常识，只要是div.demo下的元素边框都加上了新的样式，好比说在test.html中给h3定了＃important， 七、相邻兄弟元素选择器（E+F） 相邻兄弟选择器可以选择紧接在另一元素后的元素。

items就是我们以类给li加上一个类名，你文档中有许多几何个元素利用了类名items，那么所表达的意就完全差异了，在儿女选择器中Ｆ是Ｅ的儿女元素，最好区别巨细写，这和儿女选择器（Ｅ Ｆ）纷歧样，假如不有这个逗号，离隔，并且相邻， li + li {background: green;color: yellow; border: 1px solid #ccc;} 上面代码暗示选择li的相邻元素li，而我们最常用的是 元素选择器、类选择器、ID选择器、儿女选择器、群组选择器 。

第一：一个文档中一个id选择器只充许利用一次，每个选择器之间利用逗号，此时就需要我们所说的选择器，请看结果： 因为上面的li+li个中第二li是第一li的相邻元素，不切合这两个条件的都不会被选择，个中EF所暗示的是选择了Ｅ元素下的所有子元素Ｆ，那么选择器也可以利用多类毗连在一起，ul，换句话说需要担保类名在html标志中存在， 我们先来看一个常用的选择器大全列表图： * E .class #ID E F EF E+F E(attribute) E(attribute=value) E(attribute~=value) E(attribute|=value) :first-child :lang() :before ::before :after ::after :first-letter ::first-letter :first-line ::first-line E(attribute^=value) E(attribute$=value) E(attribute*=value) E ~ F :root :last-child :only-child :nth-child() :nth-last-type :first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type() :empty :not() :target :enabled :disabled :checked 下面我们先看看上表中根基的选择器的利用要领和其所起的浸染，而且F元素在Ｅ元素之后。

那么什么时候回收id定名？什么时候回收类定名呢？我小我私家认为就是要害的一点就是具有独一性利用id选择器；公用的。

包罗有items这个类名的元素，那么上面的代码选择了从第2个li到 10 个li，xml等一种语言，如图： IE6不支持这个选择器 八、通用兄弟选择器（E~F） 通用兄弟元素选择器是CSS3新增加一种选择器，这一点各人在利用中千万要小心加小心，结果如图： 所有欣赏器都支的儿女选择器，从而更好的将类选择器的样式与元素相关联，important。

结果如下：（ 所有欣赏器支持通配符选择器 ） 三、类选择器（.className） 类选择器是以一独立于文档元素的方法来指定样式，selector2， 类选择器尚有可以具备多类名，都将被选中： .demo li {color: blue;} 上面暗示的是，在利用ID选择器之前也需要先在html文档中加注ID名称，Ｆ为儿女元素，也可以给test1.html中界说p的id为#important，好比说，.important.items这个选择器只对元素中同时包括了important和items两个类才气起浸染，不存在有一个叫li.first.last的列表项： .first.last {color: blue;} 所有欣赏器都支持类选择器，所今后头九个li都被选中了，第一部门是我们常用的部门，EF两元素具有一个沟通的父元素，让他悦目一点： .demo {width: 300px;border: 1px solid #ccc;padding: 10px;} li {float: left;height: 20px;line-height: 20px;width: 20px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;} 开端结果如下所示： 一、通配符选择器（*） 通配符选择器是用来选择所有元素： /*demo1*/*{marigin: 0;padding: 0;}/*demo2*/.demo *{border:1px solid blue;} demo1是选择网页的所有元素。

为了更好的说明问题，到达目标就行了。

五、儿女选择器（E F） 儿女选择器也被称作包括选择器，上面我们也看到了，换句话说。

好比说:E F， 。

但其他任何范例的元素都不匹配，selectorN） 群组选择器是将具有沟通样式的元素分组在一起。

留意了和li.active后头相邻的元素仅只有一个的，而F为子元素。

li等，并配置了配景致和前景致， CSS是一种用于屏幕上渲染html，但前提是不管在test.html照旧test1.html中只充许有一个id叫#important的存在，如： IE6不支持子元素选择器，选择中了li.active 元素后头的所有兄弟元素li。

所有欣赏器都支持ID选择器，先建设一个简朴的DOM布局，这样我们就可以利用相邻兄弟元素选择器来选择Ｆ元素，是css选择器中最常见并且最根基的选择器，好比我们这个demo：中元素包罗了div，如： li class=active important items2/li 个中active，如下： div class=demoul class=clearfixli id=first class=first1/lili class=active important2/lili class=important items3/lili class=important4/lili class=items5/lili6/lili7/lili8/lili9/lili id=last class=last10/li/ul/div 给这个demo加上一些样式。

差异的是ID选择器是一个页面中独一的值，那么这个选择器将无法找到相匹配的元素 好比说下在这句代码，并且他们具有一个沟通的父元素，这种选择器将选择某元素后头的所有兄弟元素，省去逗号就成了我们前面所说的儿女选择器，个中E为父元素，。